<script>
export default {
  name: "menuPage"
}
</script>

<template>
  <div class="box">
    <div>
      <header>
<!--        热门应用-->
      </header>
      <!-- 存放小盒子 按钮 跳转-->
      <main style="margin-top: 10px">
        <div class="whiteBox paddingBox " style="display: flex">
          <!-- 发布企业-->
          <router-link to="publishPage">
            <div class="flexBox">
              <div class="flexBoxleft">
                <img src="../assets/menu/blackenterprise.png" alt="" srcset="" class="blackenterpriseImg radius">
              </div>
              <div class="flexBoxright">
                <div class="title">发布黑企</div>
                <div class="littleTitle">发布黑心企业</div>
              </div>
            </div>
          </router-link>
<!--          <div class="flexBox">-->
<!--            <div class="flexBoxleft">-->
<!--              <img src="../assets/menu/organization.png" class="organizationImg radius" alt="">-->
<!--            </div>-->
<!--            <div class="flexBoxright">-->
<!--              <div class="title">非法组织</div>-->
<!--              <div class="littleTitle">查询非法组织</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="flexBox">-->
<!--            <router-link to="/fraud">-->
<!--              <div class="flexBoxleft">-->
<!--                <img src="../assets/menu/fraud.png" alt="" srcset="" class="fraudImg radius">-->
<!--              </div>-->
<!--            </router-link>-->
<!--            <div class="flexBoxright">-->
<!--              <div class="title">诈骗企业</div>-->
<!--              <div class="littleTitle">诈骗企业实例</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="flexBox">-->
<!--            <div class="flexBoxleft">-->
<!--              <img src="../assets/menu/redList.png" alt="" srcset="" class="redlistImg radius">-->
<!--            </div>-->
<!--            <div class="flexBoxright">-->
<!--              <div class="title">企业红榜</div>-->
<!--              <div class="littleTitle">良好企业排行</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="flexBox">-->
<!--            <div class="flexBoxleft">-->
<!--              <img src="../assets/menu/hospital.png" alt="" srcset="" class="hospitalImg radius">-->
<!--            </div>-->
<!--            <div class="flexBoxright">-->
<!--              <div class="title">莆田医院</div>-->
<!--              <div class="littleTitle">莆田医院避雷</div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped lang="scss">
.radius {
  border-radius: 5px;
}

.hospitalImg {
  background-image: linear-gradient(to right, #70a1ff, #1e90ff);
}

.redlistImg {
  background-image: linear-gradient(to right, #ff6b81, #ff4757);
}

.fraudImg {
  background-image: linear-gradient(to right, #fcf4e4, #fcac08);
}

.blackenterpriseImg {
  background-image: linear-gradient(to right, white, black);
}

.organizationImg {
  background-image: linear-gradient(to right, #f0ecfc, #8c53fa);
}

.flexBoxleft {
  margin: 0 !important;
}

.littleTitle {
  padding-top: 4px;
  font-size: 12px;
  line-height: 20px;
  color: #999;
}

.title {
  padding-top: 8px;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: #333;
}

img {
  padding: 3px;
  width: 64px;
  height: 64px;
}

.flexBox {
  margin-right: 20px;
  padding: 10px 20px;
  background-color: white;
  width: 240px;
  display: flex;
}

header {
  height: 25px;
  //border-bottom: 1px solid #eee;
  margin-bottom: 5px;
  //margin-right: 30px;
  line-height: 50px;
  color: #333;
  font-weight: bold;
}

* {
  margin: 0 auto;
}

.box {
  margin: 0 auto;
  width: 1248px;
}
</style>
